<template>
    <div class="teamplate-current">
        <div class="container-fluid">
            <div class="row h-query">
                <form class="form-inline">
                    
                    <div class="form-group">
                        <label class="">会员姓名</label>
                        <input type="text" class="form-control memberName input-group-sm"  placeholder="请输入关键字">
                    </div>
                    <div class="form-group">
                        <label class="">手机号</label>
                        <input type="text" class="form-control phoneNumber input-group-sm"  placeholder="请输入关键字">
                    </div>
                    <div class="form-group">
                        <label class="">卡号</label>
                        <input type="text" class="form-control cardNumber input-group-sm" placeholder="请输入关键字">
                    </div>
                    <div class="form-group">
                        <label class="">助记码</label>
                        <input type="text" class="form-control zhujima input-group-sm" placeholder="请输入关键字">
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-default" @click="equery">查询</button>
                    </div>
                </form>
            </div>
            <div class="row">
                <div class="list-table">
                    <div class="table-wrap">
                        <div class="operat">
                            <span class="" data-toggle="modal" data-target="#myModal"><i class="iconfont icon-jiahao"></i> 添加会员</span>
                        </div>
                        <div class="table-box"  >
                            <table class="table table-striped tc ">
                                <tbody >
                                    <tr>
                                        <th style="text-align:left;">优惠卡编号</th>
                                        <th style="text-align:left;">持卡人姓名</th>
                                        <th style="text-align:left;">性别</th>
                                        <th style="text-align:left;">出生日期</th>
                                        <th style="text-align:left;">固定电话</th>
                                        <th style="text-align:left;">手机</th>
                                        <th style="text-align:left;">家庭地址</th>
                                        <th style="text-align:left;">慢性病史</th>
                                        <th style="text-align:left;">用药过敏史</th>
                                        <th style="text-align:right;">扣率</th>
                                        <th style="text-align:left;">email地址</th>
                                        <th style="text-align:left;">备注</th>
                                        <th >操作</th>
                                    </tr>
                                    <tr v-for="(item,index) in cardCode" id="fruit">
                                        <!-- <input name="Fruit" type="checkbox" class="fruit" :value="item.cardid"/> -->
                                        <td style="text-align:left;">{{item.kkhcode}}</td>
                                        <td style="text-align:left;">{{item.kkhname}}</td>
                                        <td style="text-align:left;">{{item.sexid}}</td>
                                        <td style="text-align:left;">{{item.crsq}}</td>
                                        <td style="text-align:left;">{{item.guddh}}</td>
                                        <td style="text-align:left;">{{item.callnum}}</td>
                                        <td style="text-align:left;">{{item.manxbs}}</td>
                                        <td style="text-align:left;">{{item.manxbs}}</td>
                                        <td style="text-align:left;">{{item.yongygms}}</td>
                                        <td style="text-align:right;">{{item.koulv | formatPrice}}</td>
                                        <td style="text-align:left;">{{item.email}}</td>
                                        <td style="text-align:left;">{{item.beizhu}}</td>
                                        <td ><button class="btn btn-default child-btn mr10" @click="delEvent(item.cardid)">删除</button><button class="btn btn-default child-btn" @click="editAdd(item.cardid)" >编辑</button></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="pager-box clearfix pt15">
                            <div class="pull-left">共计
                                <span class="blue">{{count}}</span>条信息 
                                </div>
                                <div class="pull-right">
                                    <div id="pagenav" class="tcdPageCode"></div>
                                </div>
                        </div>
                        <!-- <div>
                            <button class="chooseFruit">删除</button>
                            <button id="checkAll">全选</button>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>
        <!-- 模态框（Modal）增加 -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
			<div class="modal-dialog" style="width: 60%;margin-top: 100px;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel"><img  src="../assets/_src/images/add.png" alt="">添加会员</h4>
					</div>
					<div class="modal-body">
						<div class="">
							<div class="row font-color-g">
								<div class="col-lg-4 col-md-4 col-sm-4">
									<form class="form-inline margin-top5 text-right">
										<div class="form-group ">
                                            <span style="color:red;">✲</span>
											<label class="">卡号</label>
											<input type="text" class="form-control inputT addCardNumber" >
										</div>
									</form>
									<form class="form-inline margin-top5 text-right">
										<div class="form-group ">
											<label>发卡日期</label>
											<input type="text"  class="form-control inputT addData" v-model="today" readonly>
										</div>
									</form>
									<form class="form-inline margin-top5 text-right">
										<div class="form-group ">
											<label>有效期</label>
											<input type="text" class="form-control inputT addValidity" v-model="closingDate" readonly>
										</div>
									</form>
									<form class="form-inline margin-top5 text-right" >
										<div class="form-group ">
											<label>累计消费</label>
											<input type="text" class="form-control inputT addCumulative" value="0.00" readonly>
										</div>
									</form>
									<form class="form-inline margin-top5 text-right">
										<div class="form-group ">
											<label>积分</label>
											<input type="text" class="form-control inputT addIntegral" value="0.00" readonly>
										</div>
									</form>
									<form class="form-inline margin-top5 text-right">
										<div class="form-group ">
											<label>已换积分</label>
											<input type="text" class="form-control inputT addInIntegral" value="0.00" readonly>
										</div>
									</form>
								</div>
								<div class="col-lg-4 col-md-4 col-sm-4">
									<form class="form-inline margin-top5 text-right">
										<div class="form-group ">
                                            <span style="color:red;">✲</span>
											<label>姓名</label>
											<input type="text" class="form-control inputT addName">
										</div>
									</form>
									<form class="form-inline margin-top5 text-right">
										<div class="form-group ">
                                            <span style="color:red;">✲</span>
											<label>电话</label>
											<input type="text" class="form-control inputT addPhone" >
										</div>
									</form>
									<form class="form-inline margin-top5  text-right">
										<label >性别</label>
										<div class="inputT form-group sexadd">
										<div class="radio ">
											<label>
	                                      	      <input type="radio" name="optionsRadios" id="optionsRadios1" v-model="gender"  value="男"  checked> 男生
	                                        </label>
										</div>
										<div class="radio radioLeft">
											<label>
		                                         <input type="radio" name="optionsRadios" id="optionsRadios2" v-model="gender"  value="女" >女生
	                                        </label>
										</div>
										</div>
									</form>
									 <div class="control-group form-group margin-top5 text-right">
                                        <span style="color:red;">✲</span>
                                        <label class="control-label">出生日期</label>
                                        <div class="controls input-append date form_date" style="display:inline-block;" data-date="" data-date-format="yyyy-mm-dd" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                                            <input size="16" type="text" style="padding:0px;" @change="check" id="txt_calendar"  class="data form-control">
                                            <span class="add-on"><i class="icon-remove"></i></span>
                                            <span class="add-on"><i class="icon-th"></i></span>
                                        </div>
                                        <input type="hidden" id="dtp_input2" value="" /><br/>
                                    </div> 
									<form class="form-inline margin-top5 text-right">
										<div class="form-group ">
											<label>联系地址</label>
											<input type="text" class="form-control inputT addAddress ">
										</div>
									</form>
									<form class="form-inline margin-top5 text-right">
										<div class="form-group ">
											<label>邮箱</label>
											<input type="text" class="form-control inputT addEmail">
										</div>
									</form>
								</div>
								<div class="col-lg-4 col-md-4 col-sm-4">
									<form class="form-inline margin-top5 text-right">
										<div class="form-group ">
											<label >慢性病史</label>
											<input  type="text" class="form-control inputT addChronicTree">
										</div>
									</form>
									<form class="form-inline margin-top5 text-right">
										<div class="form-group ">
											<label>药物过敏史</label>
											<input type="text" class="form-control inputT addHistoryOfDrug">
										</div>
									</form>
									<form class="form-inline margin-top5 text-right">
										<div class="form-group ">
											<label>备注</label>
											<textarea  class="form-control inputT preservation addRemark" rows="3"></textarea>
										</div>
									</form>
                                    <form class="form-inline margin-top5 text-right">
										<div class="form-group ">
											<label>是否发放会员实体卡</label>
											<select class="selectedHello">  
                                                <option v-for="item in items"  :selected="index=1?true:false" >{{item.text}}</option>  
                                            </select>
										</div>
									</form>
                                    <form class="form-inline margin-top5 text-right">
										<div class="form-group ">
											<label>是否是管理员</label>
											<select class="selectedWarden">  
                                                <option v-for="(item,index) in items" :selected="index=1?true:false" >{{item.text}}</option>  
                                            </select>
										</div>
									</form>
								</div>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-primary"  @click="preservation">保存</button>
					</div>
				</div>
            </div>
		</div>
    </div>
</template>
<style>
    .everyWeekDay .weekday,
    .everyDay .days {
        /*解决span不支持width属性*/
        display: -moz-inline-box;
        display: inline-block;
        margin: 5px 0 0 20px;
        text-align: center;
        width: 20px;
        border: 1px solid #f7f7f7;
        cursor: pointer;
    }
    .marginTop {
        margin-top: 5px;
    }
    .selectStyle {
        padding-left: 10px;
        border: none;
        border-radius: 3px;
        outline: none;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        margin: 0 10px 0 10px;
        width: 60px;
        border-color: #0fb9ef;
        color: #0fb9ef;
    }
</style>
<script>
    import bus from "../api/eventBus";
    import {
        setUi,
        setpopPerfect
    } from "../vuex/actions";
    import {
        ui,
        popPerfect
    } from "../vuex/getters";
    export default {
        components: {},
        data() {
            return {
                v: 1686,
                cardCode: [],
                gender: "男",
                count: "",
                items: [{
                    text: "是",
                    value: "1"
                }, {
                    text: "否",
                    value: "0"
                }],
                sex: [{
                    text: "男生",
                    value: "1"
                }, {
                    text: "女生",
                    value: "0"
                }],
                selected: "",
                selectedWarden: "",
                details: "",
                num: "",
                numq: "",
                fdbs: ""
            };
        },

        watch: {},
        vuex: {
            getters: {
                ui,
                popPerfect
            },
            actions: {
                setUi,
                setpopPerfect
            }
        },
        methods: {
            check(e) {
                let me = this;
                var a = /^(\d{4})-(\d{2})-(\d{2})$/;
                if (!a.test($(".data").val())) {
                    layer.msg("日期格式不正确!");
                    return false;
                }
            },
            editAdd(cardid) {
                let me = this;
                // 会员详情
                sessionStorage.setItem("details", cardid);
                //    this.$router.push({ path: '/card' })
                // this.$router.go('/card');
                this.$router.push({
                    path: "/card"
                });
            },

            delEvent(cardid) {
                let me = this;
                //询问框
                layer.confirm(
                    "您确定要删除么？", {
                        btn: ["是", "否"]
                            //按钮
                    },
                    function() {
                        //是
                        $.ajax({
                            type: "post",
                            url: me.cfg.api + "/huiyuan/deleteHuiyuan",
                            data: {
                                cardid: cardid
                            },
                            dataType: "json",
                            success: function(data) {
                                console.log(data);
                                me.getUserPageList();
                                layer.msg("已经成功删除记录" + cardid, {
                                    icon: 5
                                });
                            }
                        });
                    },
                    function() {
                        //否
                    }
                );
            },
            preservation(e) {
                let me = this;
                let re = /^1[3|4|5|7|8][0-9]{9}$/; //手机号的正则验证
                // 增加会员信息
                me.cardAdd = $(".addCardNumber").val();
                me.nameAdd = $(".addName").val();
                me.phoneAdd = $(".addPhone").val();
                me.selectedWarden = $(".selectedWarden").val();
                me.selectedHello = $(".selectedHello").val();
                console.log(me.cardAdd);
                if (me.selectedWarden == "是") {
                    me.selectedWarden = 1;
                } else {
                    me.selectedWarden = 0;
                }
                if (me.selectedHello == "是") {
                    me.selectedHello = "是";
                } else {
                    me.selectedHello = "否";
                }

                if (me.cardAdd == "") {
                    layer.alert("会员卡号不能为空");
                    return false;
                } else {
                    // 校验会员卡号
                    $.ajax({
                        type: "get",
                        url: me.cfg.api + "/huiyuan/selectOneKkhcode",
                        data: {
                            kkhcode: me.cardAdd
                        },
                        dataType: "json"
                    }).done(function(data) {
                        console.log("===校验会员卡号===");
                        console.log(data);
                        me.cardServerce = data.data;
                        if (!(data.data == null)) {
                            layer.alert("您的会员卡号已存在");
                            return false;
                        }
                    });
                }
                if (me.nameAdd == "") {
                    layer.alert("姓名不能为空");
                    return false;
                }
                if (me.phoneAdd == "") {
                    layer.alert("手机号不能为空");
                    return false;
                } else if (!re.test(me.phoneAdd)) {
                    layer.alert("请输入正确的手机号");
                    return false;
                } else {
                    // 校验手机号
                    $.ajax({
                        type: "get",
                        url: me.cfg.api + "/huiyuan/selectOneCallnum",
                        data: {
                            callnum: me.phoneAdd
                        },
                        dataType: "json"
                    }).done(function(data) {
                        console.log("===校验手机号===");
                        console.log(data);
                        me.phoneServerce = data.data;
                        if (!(data.data == null)) {
                            layer.alert("您的手机号已存在");
                            return false;
                        }
                    });
                }

                let parms = {
                    // cardid:'www021',  //会员号
                    kkhcode: me.cardAdd, //会员卡号
                    kkhname: me.nameAdd, //会员姓名
                    sxrq: me.closingDate, //会员卡失效日期
                    beizhu: $(".addRemark").val(), //备注
                    koulv: 100, //会员折扣率（默认100）
                    is_faka: me.selectedHello, //是否发放实体会员卡
                    fdbs: me.fdbs, //分店标识
                    crsq: $("#txt_calendar").val(), //出生日期
                    callnum: me.phoneAdd, //手机号
                    zyaddress: $(".addAddress").val(), //家庭地址
                    manxbs: $(".addChronicTree").val(), //慢性病史
                    yongygms: $(".addHistoryOfDrug").val(), //用药过敏史
                    sexid: me.gender, //性别
                    boss: me.selectedWarden, //是否是管理员（是：1，否 0）
                    email: $(".addEmail").val()
                };
                console.log(parms, "12333");
                $.ajax({
                    type: "post",
                    url: me.cfg.api + "/huiyuan/insertHuiyuan",
                    data: parms,
                    dataType: "json"
                }).done(function(data) {
                    console.log("===增加会员信息===");
                    console.log(data);
                    console.log(me.gender);
                    $("#myModal").modal("hide");
                });
            },
            equery(e) {
                let me = this;
                // 模糊查询会员信息
                me.getUserPageList = function(curr) {
                    $.ajax({
                        type: "get",
                        url: me.cfg.api + "/huiyuan/selectOneHuiyuan",
                        data: {
                            page: curr || 1,
                            rows: me.row,
                            kkhname: $(".memberName").val(),
                            callnum: $(".phoneNumber").val(),
                            kkhcode: $(".cardNumber").val(),
                            zjm: $(".zhujima").val()
                        },
                        dataType: "json",
                        success: function(data) {
                            console.log("===模糊查询会员信息===");
                            me.cardCode = data.data.list;
                            me.count = data.data.count;
                            console.log(data);
                            console.log(me.cardCode);
                            for (let i = 0; i < me.cardCode.length; i++) {
                                me.cardCode[i].cardid;
                                console.log(me.cardCode[i].cardid);
                            }
                            laypage({
                                cont: "pagenav", //容器。值支持id名、原生dom对象，jquery对象,
                                pages: data.data.pagCount, //总页数
                                first: "第一页",
                                last: "最后一页",
                                curr: curr || 1, //当前页
                                jump: function(obj, first) {
                                    //触发分页后的回调
                                    if (!first) {
                                        //点击跳页触发函数自身，并传递当前页：obj.curr
                                        me.getUserPageList(obj.curr);
                                    }
                                }
                            });
                        }
                    });
                };
                me.getUserPageList();
            }
        },
        mounted() {
            let user = JSON.parse(sessionStorage.getItem("user"));
            //  $("#checkAll").click(function(){
            //     $(".fruit").prop("checked", true);
            //  });
            //  $(".chooseFruit").click(function(){
            //     var obj = document.getElementsByName("Fruit");//选择所有name="Fruit"的对象，返回数组
            //     var s='';//如果这样定义var s;变量s中会默认被赋个null值
            //     var array=[];
            //     for(var i=0;i<obj.length;i++){
            //         if(obj[i].checked){
            //         //取到对象数组后，我们来循环检测它是不是被选中
            //         s=obj[i].value;   //如果选中，将value添加到变量s中
            //         var cardid={"cardid":obj[i].value};
            //         array.push(cardid);
            //         console.log(array,'删除会员向后台传参')
            //         }
            //     }
            //     var prams={
            //          cardidList:array
            //     }
            //     console.log(prams,'传参')
            //     $.ajax({
            //             type: 'post',
            //             url: me.cfg.api + '/huiyuan/deleteListHuiyuan',
            //             data:prams,
            //             dataType: 'json',
            //             success : function(data) {
            //                console.log(data);

            //             }
            //          });

            // });

            if (!user) {
                router.push({
                    path: "/login"
                });
                return;
            }
            $(document).keydown(e => {
                let key = e.keyCode;
                if (key == 13) {
                    let me = this;
                    // 模糊查询会员信息
                    me.getUserPageList = function(curr) {
                        $.ajax({
                            type: "get",
                            url: me.cfg.api + "/huiyuan/selectOneHuiyuan",
                            data: {
                                page: curr || 1,
                                rows: me.row,
                                kkhname: $(".memberName").val(),
                                callnum: $(".phoneNumber").val(),
                                kkhcode: $(".cardNumber").val()
                            },
                            dataType: "json",
                            success: function(data) {
                                console.log("===模糊查询会员信息===");
                                me.cardCode = data.data.list;
                                me.count = data.data.count;
                                console.log(me.cardCode);
                                for (let i = 0; i < me.cardCode.length; i++) {
                                    me.cardCode[i].cardid;
                                    console.log(me.cardCode[i].cardid);
                                }
                                laypage({
                                    cont: "pagenav", //容器。值支持id名、原生dom对象，jquery对象,
                                    pages: data.data.pagCount, //总页数
                                    first: "第一页",
                                    last: "最后一页",
                                    curr: curr || 1, //当前页
                                    jump: function(obj, first) {
                                        //触发分页后的回调
                                        if (!first) {
                                            //点击跳页触发函数自身，并传递当前页：obj.curr
                                            me.getUserPageList(obj.curr);
                                        }
                                    }
                                });
                            }
                        });
                    };
                    me.getUserPageList();
                }
            });
            let me = this;
            me.fdbs = localStorage.getItem("fdbs");
            console.log(me.fdbs, "分店标识");
            var time = new Date();
            me.today =
                time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate(); //发卡日期
            me.closingDate =
                time.getFullYear() +
                3 +
                "-" +
                (time.getMonth() + 1) +
                "-" +
                time.getDate(); //发卡截止日期
            var time = new Date();
            let winHeight = $(window).outerHeight();
            if (winHeight <= 768) {
                me.row = 12;
            } else if (winHeight <= 800) {
                me.row = 14;
            } else if (winHeight <= 863) {
                me.row = 18;
            } else {
                me.row = 20;
            }

            $(".data").val(me.today);
            $(".form_date").datetimepicker({
                language: "zh-CN",
                weekStart: 1,
                todayBtn: 1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
                forceParse: 0
            });
            $(".selectedWarden").change(function() {
                if (me.selectedWarden == "是") {
                    me.selectedWarden = 1;
                } else {
                    me.selectedWarden = 0;
                }
                if (me.selectedHello == "是") {
                    me.selectedHello = "是";
                } else {
                    me.selectedHello = "否";
                }
            });
            me.getUserPageList = function(curr) {
                $.ajax({
                    type: "get",
                    url: me.cfg.api + "/huiyuan/selectHuiYuan",
                    data: {
                        page: curr || 1,
                        rows: me.row
                    },
                    dataType: "json",
                    success: function(data) {
                        me.cardCode = data.data.list;
                        me.count = data.data.count;
                        console.log(data);
                        laypage({
                            cont: "pagenav", //容器。值支持id名、原生dom对象，jquery对象,
                            pages: data.data.pagCount, //总页数
                            first: "第一页",
                            last: "最后一页",
                            curr: curr || 1, //当前页
                            jump: function(obj, first) {
                                //触发分页后的回调
                                if (!first) {
                                    //点击跳页触发函数自身，并传递当前页：obj.curr
                                    me.getUserPageList(obj.curr);
                                }
                            }
                        });
                    }
                });
            };
            me.getUserPageList();
        }
    };
</script>
<style>
    .tcdPageCode {
        padding: 5px 20px;
        text-align: left;
        color: #ccc;
        text-align: center;
    }
    
    .tcdPageCode a {
        display: inline-block;
        color: #428bca;
        display: inline-block;
        height: 25px;
        line-height: 25px;
        padding: 0 10px;
        border: 1px solid #ddd;
        margin: 0 2px;
        border-radius: 4px;
        vertical-align: middle;
    }
    
    .tcdPageCode a:hover {
        text-decoration: none;
        border: 1px solid #428bca;
    }
    
    .tcdPageCode span.current {
        display: inline-block;
        height: 25px;
        line-height: 25px;
        padding: 0 10px;
        margin: 0 2px;
        color: #fff;
        background-color: #428bca;
        border: 1px solid #428bca;
        border-radius: 4px;
        vertical-align: middle;
    }
    
    .tcdPageCode span.disabled {
        display: inline-block;
        height: 25px;
        line-height: 25px;
        padding: 0 10px;
        margin: 0 2px;
        color: #bfbfbf;
        background: #f2f2f2;
        border: 1px solid #bfbfbf;
        border-radius: 4px;
        vertical-align: middle;
    }
    
    .biaoti {
        display: inline-block;
        padding: 6px 12px;
        line-height: 1.42857143;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        border: 1px solid transparent;
        border-radius: 4px;
        border: 1px solid rgb(149, 159, 194);
    }
</style>